<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车辆召回数据分析 - 简化版</title>
    <script src="/static/js/chart.js"></script>
    <style>
        :root {
            --bg-color: #0c113b;
            --primary-color: rgba(22, 33, 62, 0.5);
            --border-color: rgba(36, 255, 236, 0.3);
            --glow-color: rgba(36, 255, 236, 0.5);
            --accent-color: #24ffec;
            --text-color: #e0e0e0;
            --font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: var(--bg-color);
            background-image: radial-gradient(circle, #1a1a2e 0%, #0c113b 100%);
            color: var(--text-color);
            font-family: var(--font-family);
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
        }

        header h1 {
            font-size: 2.5em;
            color: var(--accent-color);
            text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color);
            margin: 10px 0;
        }

        .charts-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-top: 30px;
        }

        .chart-panel {
            background-color: var(--primary-color);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: inset 0 0 15px rgba(36, 255, 236, 0.1), 0 0 20px rgba(12, 17, 59, 0.5);
            padding: 25px;
            min-height: 500px;
        }

        .chart-title {
            font-size: 1.4em;
            font-weight: bold;
            color: var(--accent-color);
            margin: 0 0 20px 0;
            text-align: center;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }

        .chart-content {
            position: relative;
            height: 400px;
        }

        canvas {
            max-height: 100% !important;
        }

        @media (max-width: 768px) {
            .charts-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .chart-panel {
                min-height: 400px;
            }
            
            .chart-content {
                height: 300px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>车辆召回数据分析</h1>
        </header>

        <div class="charts-container">
            <div class="chart-panel">
                <div class="chart-title">制造商召回数 Top 10</div>
                <div class="chart-content">
                    <canvas id="manufacturerChart"></canvas>
                </div>
            </div>
            
            <div class="chart-panel">
                <div class="chart-title">召回类型分布</div>
                <div class="chart-content">
                    <canvas id="typeChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Chart.js全局配置
        Chart.defaults.color = 'rgba(224, 224, 224, 0.8)';
        Chart.defaults.borderColor = 'rgba(36, 255, 236, 0.1)';

        let charts = {};

        // 加载数据并绘制图表
        function loadAndDrawCharts() {
            fetch('/analysis_results.json')
                .then(response => response.json())
                .then(data => {
                    drawManufacturerChart(data.top10Manufacturers);
                    drawTypeChart(data.recallsByType);
                })
                .catch(error => {
                    console.error('加载分析数据时出错:', error);
                    // 显示错误信息
                    document.querySelector('.charts-container').innerHTML = 
                        '<div style="text-align: center; color: #ff6b6b; font-size: 1.2em; grid-column: 1 / -1;">数据加载失败，请检查服务器连接</div>';
                });
        }

        // 绘制制造商召回数柱状图
        function drawManufacturerChart(data) {
            const ctx = document.getElementById('manufacturerChart');
            
            if (charts.manufacturer) {
                charts.manufacturer.destroy();
            }

            const labels = Object.keys(data);
            const values = Object.values(data);

            charts.manufacturer = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '召回次数',
                        data: values,
                        backgroundColor: 'rgba(36, 255, 236, 0.6)',
                        borderColor: 'rgba(36, 255, 236, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: '制造商',
                                color: 'rgba(224, 224, 224, 0.8)'
                            },
                            ticks: {
                                color: 'rgba(224, 224, 224, 0.8)',
                                maxRotation: 45
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: '召回次数',
                                color: 'rgba(224, 224, 224, 0.8)'
                            },
                            ticks: {
                                color: 'rgba(224, 224, 224, 0.8)'
                            }
                        }
                    }
                }
            });
        }

        // 绘制召回类型分布饼图
        function drawTypeChart(data) {
            const ctx = document.getElementById('typeChart');
            
            if (charts.type) {
                charts.type.destroy();
            }

            const backgroundColors = [
                'rgba(36, 255, 236, 0.7)',
                'rgba(233, 69, 96, 0.7)',
                'rgba(255, 206, 86, 0.7)',
                'rgba(153, 102, 255, 0.7)',
                'rgba(255, 159, 64, 0.7)',
                'rgba(75, 192, 192, 0.7)',
                'rgba(255, 99, 132, 0.7)',
                'rgba(54, 162, 235, 0.7)'
            ];

            charts.type = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: Object.keys(data),
                    datasets: [{
                        label: '召回类型',
                        data: Object.values(data),
                        backgroundColor: backgroundColors,
                        borderColor: 'rgba(36, 255, 236, 0.3)',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                color: 'rgba(224, 224, 224, 0.8)',
                                padding: 15,
                                usePointStyle: true
                            }
                        }
                    }
                }
            });
        }

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            loadAndDrawCharts();
        });
    </script>
</body>
</html> 